<template>
	<view class="page">
		<!-- <view class="top">
			<uni-nav-bar @clickLeft="goBack"  title="业主监控" background-color="transparent" color="#333"  :border="false" :statusBar="true" left-icon="left"></uni-nav-bar>
		</view> -->
			<u-sticky>
		<view class="navigation">
			<view class="navigation-fz">分组：</view>
			<u-tabs :current="currentTab" @click="clickTab" :list="tabList" lineColor="#F43107" lineWidth="60rpx"
				lineHeight="4rpx"
				:activeStyle="{fontFamily: 'Source Han Sans CN',fontWeight:'bold',fontSize:'30rpx!important',color:'#F43107!important'}"></u-tabs>
		</view>
			</u-sticky>
		<view class="navigation-content">
			<view class="navigation-item" v-for="item in 13">
				<view class="item-1">
					<image src="../../static/img/z6162@2x.png" mode=""></image>
					<view class="item-title">中国电信股份有限公司上海分公司</view>
				</view>
				<view class="item-2">
					<view class="item-lable">最新项目：</view>
					<view class="item-value">中国石油内蒙古销售公司加油站数据洞察…</view>
				</view>
				<view class="item-2">
					<view class="item-lable" style="line-height: 44rpx;">分         组：</view>
					<view class="item-fz">合作伙伴</view>
				</view>
				<view class="item-2">
					<view class="item-lable">更新时间：</view>
					<view class="item-value">2023-12-29 12:44:55</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: '全部',
					},
					{
						name: '默认分组',
					},
					{
						name: '竞争对手',
					},
					{
						name: '合作伙伴',
					},
				]
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-tabs__wrapper__nav__item{
		height: 88rpx;
	}
	::v-deep .u-tabs__wrapper{
		height: 88rpx;
		}
		
		::v-deep .u-tabs__wrapper__nav{
		height: 88rpx;
		}
	
	::v-deep .u-tabs__wrapper__nav__item__text {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx !important;
		color: #A9B1BE !important;
	}
.page{
	min-height: 100vh;
	background: #F0F2F5;

	// .top{
	// 	width: 750rpx;
	// 	height: 88rpx;
	// 	background: #FFFFFF;
	// 	position: sticky;
	// 	top: 0;
	// 	z-index: 999999;
	// }
	.navigation{
		width: 750rpx;
		height: 88rpx !important;
		background: #FFFFFF;
		border-radius: 0rpx;
		display: flex;
		margin-bottom: 20rpx;
		// position: sticky;
		// 	top: 87rpx;
		// z-index: 999999;
		.navigation-fz{
		    height: 88rpx !important;
			width: 90rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #304156;
			line-height: 88rpx !important;
			margin-left: 30rpx;
		}
	}
	.navigation-content{
		padding: 0 30rpx;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx;
		margin-bottom: 100rpx;
	}
	.navigation-item{
	
		// padding: 26rpx 30rpx;
		border-bottom: 1px solid #DDDDDD;
		.item-1{
			padding-top: 26rpx;
			display: flex;
			margin-bottom: 16rpx;
			image{
				width: 52rpx;
				height: 52rpx;
				margin-right: 12rpx;
			}
			.item-title{
				
				height: 44rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}
		}
		.item-2{
			display: flex;
			margin-bottom: 20rpx;
			.item-lable{
				width: 140rpx;
				height: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #A9B1BE;
				line-height: 28rpx;
			}
			.item-value{
				max-width: 532rpx;
				height: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
				overflow: hidden;
				   white-space: nowrap;
				    text-overflow: ellipsis;
			}
			.item-fz{
				width: 128rpx;
				height: 44rpx;
				background: #F43107;
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: center;
			}
			.heng{
				width: 690rpx;
				height: 1rpx;
				background: #DDDDDD;
				border-radius: 0rpx;
			}
		}
		
	}
	.u-tabs{
		// width: 750rpx;
		height: 88rpx !important;
		// margin-top: 13rpx;
	}

}
</style>
